<template>
  <div class="mainWrapper">
    <keep-alive>
      <router-view class="main"
                   @openCardRole="openCardUseRole"
                   @closeDialog="closeDialog"
                   @showDialog="showDialog"></router-view>
    </keep-alive>
    <!-- tabbar -->
    <!--    补款-->
    <Dialog title=""
            :close-on-click-modal="false"
            custom-class="tips-dialog"
            :show-close="false"
            :visiable="cardDialogVisiable"
            width="84vw"
            @close="cardDialogVisiable=false">
      <div class="row-wrapper card-title" slot="title">
        <span>{{ $t('我的卡券') }}</span>
      </div>
      <div class="col-wrapper">
        <!--        卡券-->
        <div v-show="index<=3" class="card-content" v-for="(item,index) in cardList" :key="item.id">
          <!--          <img src="../assets/icons/dialog/bg.png" alt=""/>-->
          <div class="row-wrapper card-content-body">
            <div class="row-wrapper card-content-body-part1">
              <div class="col-wrapper card-leftpart" style="align-items: flex-start">
                <div>
                  <span>{{ item.coupon_category_name }}</span>
                </div>
                <div @click="openCardUseRole" class="row-wrapper">
                  <span>{{$t('View Rules')}}</span>
                  <img class="whiteArray"
                       src="../assets/icons/dialog/whiteArray.png" alt=""/>
                </div>
              </div>
              <div class="row-wrapper card-rightpart">
                <div>
                  <span>{{ Number(item.money) }}</span>
                </div>
                <div>
                  <span>{{$t('Yuan')}}</span>
                </div>
              </div>
            </div>
            <div class="card-content-button row-wrapper" style="justify-content:center">
              <!--              <img src="../assets/icons/dialog/bt01.png" alt=""/>-->
              <div @click="$router.push({path:'/listCardDetail'})" style="width: 100%;justify-content:center"
                   class="row-wrapper lingqu">
                <span>{{$t('Collect')}}</span>
              </div>
            </div>
          </div>
        </div>
        <!--        查看更多-->
        <div class="card-button row-wrapper">
          <span @click="$router.push({path:'/listCardDetail'})">{{ $t('查看更多') }}</span>
          <img src="../assets/icons/dialog/rightArray.png" alt=""/>
        </div>
        <!--        关闭按钮-->
        <div @click="cardDialogVisiable=false" class="card-close">
          <img src="../assets/icons/dialog/close2.png" alt="close"/>
        </div>
      </div>
    </Dialog>
    <!--    新闻-->
    <Dialog title=""
            :close-on-click-modal="false"
            custom-class="tips-dialog"
            :show-close="false"
            :visiable="newsDialogVisiable"
            width="84vw"
            @close="newsDialogVisiable=false">
      <div class="row-wrapper card-title" slot="title">
        <span>{{$t('News')}}</span>
      </div>
      <el-carousel :arrow="newsList.length>1?'always':'never'" :autoplay="false">
        <el-carousel-item v-for="item in newsList"
                          :key="item.id">
          <div class="col-wrapper newsContent">
            <div>
              <el-image v-if="item.image!==''" class="newsImage" :src="baseUrl+ item.image"/>
            </div>
            <div style="width: 100%" class="col-wrapper">
              <h3>{{ item.name }}</h3>
              <span style="margin-top: 5px;align-self: flex-start"
                    v-html="item.content"></span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="col-wrapper">
        <!--        关闭按钮-->
        <div @click="newsDialogVisiable=false" class="card-close">
          <img src="../assets/icons/dialog/close2.png" alt="close"/>
        </div>
      </div>
    </Dialog>
    <!--    广告-->
    <Dialog title=""
            :close-on-click-modal="false"
            custom-class="tips-dialog"
            :show-close="false"
            :visiable="advertisementDialogVisiable"
            width="84vw"
            @close="advertisementDialogVisiable=false">
      <div class="row-wrapper card-title" slot="title">
        <span>{{$t('Advertisements')}}</span>
      </div>
      <el-carousel :arrow="advertisement.length>1?'always':'never'"
                   :autoplay="false">
        <el-carousel-item v-for="item in advertisement"
                          :key="item.id">
          <div class="col-wrapper newsContent">
            <div>
              <el-image v-if="item.image!==''" class="newsImage" :src="baseUrl+ item.image"/>
              <!--              <img alt="" v-if="item.image!==''" class="newsImage" :src="baseUrl+ item.image"/>-->
            </div>
            <div style="width: 100%;overflow: scroll" class="col-wrapper">
              <h3>{{ item.name }}</h3>
              <span style="margin-top: 5px;align-self: flex-start"
                    v-html="item.content"></span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="col-wrapper">
        <!--        关闭按钮-->
        <div @click="advertisementDialogVisiable=false" class="card-close">
          <img src="../assets/icons/dialog/close2.png" alt="close"/>
        </div>
      </div>
    </Dialog>
    <!--    通知-->
    <Dialog title=""
            :close-on-click-modal="false"
            custom-class="tips-dialog"
            :show-close="false"
            :visiable="tipsDialogVisiable"
            width="84vw"
            @close="tipsDialogVisiable=false">
      <div class="row-wrapper card-title" slot="title">
        <span>通知</span>
      </div>
      <el-carousel :arrow="tipsList.length>1?'always':'never'"
                   :autoplay="false">
        <el-carousel-item v-for="item in tipsList"
                          :key="item.id">
          <div class="col-wrapper newsContent">
            <div>
              <el-image v-if="item.image!==''" class="newsImage" :src="baseUrl+ item.image"/>
            </div>
            <div style="width: 100%" class="col-wrapper">
              <h3>{{ item.name }}</h3>
              <span style="margin-top: 5px;align-self: flex-start"
                    v-html="item.content"></span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="col-wrapper">
        <!--        关闭按钮-->
        <div @click="tipsDialogVisiable=false" class="card-close">
          <img src="../assets/icons/dialog/close2.png" alt="close"/>
        </div>
      </div>
    </Dialog>
    <!--    卡片使用规则-->
    <Dialog title=""
            :close-on-click-modal="false"
            custom-class="tips-dialog"
            :show-close="false"
            :visiable="cardUseRoleDialogVisiable"
            width="84vw"
            @close="cardUseRoleDialogVisiable=false">
      <div class="row-wrapper card-title" slot="title">
        <span>使用规则</span>
      </div>
      <div class="col-wrapper" style="align-items: flex-start;height: 289px">
        <span style="font-size: 14px">
        1.现金券点击领取后，现金券对应的数额会添加到您账户的零钱里。
        </span>
        <span style="margin-top: 10px;font-size: 14px">
        2.本现金券仅可使用一次。
        </span>
        <span style="margin-top: 10px;font-size: 14px">
        3.最终解释权归本店所有
        </span>
      </div>
      <div class="col-wrapper">
        <!--        关闭按钮-->
        <div @click="cardUseRoleDialogVisiable=false" class="card-close">
          <img src="../assets/icons/dialog/close2.png" alt="close"/>
        </div>
      </div>
    </Dialog>
    <!--  menu  -->
    <div class="tabbar">
      <div :class="{'thisList':chooseTab==='home'}" @click="goto('home')">
        <div class="iconfont icon-shouye1"></div>
        <div>{{ $t('home.Home') }}</div>
      </div>
      <div @click="goto('active')" :class="{'thisList':chooseTab==='active'}">
        <div class="iconfont icon-liwuhuodong"></div>
        <div>{{ $t('home.Activity') }}</div>
      </div>
      <div @click="goto('pay')" :class="{'thisList':chooseTab==='pay'}">
        <div class="iconfont icon-baomingchenggong"></div>
        <div>{{ $t('home.Payment') }}</div>
      </div>
      <div @click="goto('message')" :class="{'thisList':chooseTab==='message'}">
        <div class="iconfont icon-xiaoxi"></div>
        <div>{{ $t('home.Message') }}</div>
      </div>
      <div @click="goto('my')" :class="{'thisList':chooseTab==='my'}">
        <div class="iconfont icon-wode-active"></div>
        <div>{{ $t('home.My') }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/styles/dialog.css'
import '@/styles/flax.css'
import {index} from '@/api/merbership/popup'

import {BASE_URL} from '@/config/api'
import VConsole from 'vconsole'

export default {
  data() {
    return {
      tipsDialogVisiable: false,
      cardDialogVisiable: false,
      newsDialogVisiable: false,
      advertisementDialogVisiable: false,
      cardUseRoleDialogVisiable: false,
      chooseTab: 'home',
      showMenu: true,
      newsList: [],
      advertisement: [],
      tipsList: [],
      cardList: [],
      // baseUrl: BASE_URL
    }
  },
  computed: {
    baseUrl() {
      return BASE_URL.split('/api/')[0]
    }
  },
  methods: {
    /**
     * 打开卡券使用规则弹窗
     */
    openCardUseRole() {
      this.cardUseRoleDialogVisiable = true
    },
    /**
     * 关闭所有弹窗
     */
    closeDialog() {
      this.tipsDialogVisiable = false
      this.cardDialogVisiable = false
      this.newsDialogVisiable = false
      this.cardUseRoleDialogVisiable = false
    },
    /**
     * 弹窗
     * @param val
     */
    showDialog() {
      this.getNews()
    },
    /**
     * 展示导航菜单
     */
    showUpMenu() {
      this.showMenu = true
    },
    /**
     * 隐藏菜单
     */
    hideMenu() {
      this.showMenu = false
    },
    /**
     * 页面跳转
     * @param index
     */
    goto(index) {
      switch (index) {
        case 'home':
          this.$router.push({path: '/listhome'})
          this.chooseTab = 'home'
          break
        case 'active':
          this.$router.push({path: '/listactivities'})
          this.chooseTab = 'active'
          break
        case 'pay':
          this.$router.push({path: '/listpayment'})
          this.chooseTab = 'pay'
          break
        case 'message':
          this.$router.push({path: '/listMessage'})
          this.chooseTab = 'message'
          break
        case 'my':
          this.$router.push({path: '/listMy'})
          this.chooseTab = 'my'
          break
        default:
          break
      }
    },
    //   ------------------- axios ---------------------
    /**
     * 获取新闻列表
     */
    getNews() {
      const pd = {}
      index(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            if (res.data.data['1']) {
              this.newsList = res.data.data['1']
              this.newsDialogVisiable = true
            }
            if (res.data.data['2']) {
              this.advertisement = res.data.data['2']
              this.advertisementDialogVisiable = true
            }
            if (res.data.data['3']) {
              this.tipsList = res.data.data['3']
              this.tipsDialogVisiable = true
            }
            if (res.data.data['999']) {
              this.cardList = res.data.data['999'][0].coupon_list
              console.log(res.data.data['999'][0])
              this.cardDialogVisiable = true
            }
          } else {
            this.$message.error(res.data.msg)
          }
        })
    }
  },
  created() {
    new VConsole()
  },
  activated() {
    // this.getNews()
  }
}
</script>
<style>
.el-carousel__item {
  overflow-x: hidden;
  overflow-y: scroll;
}

</style>
<style scoped>
/*------ 弹窗 紧急通知 ------------*/
.tips-title {
  justify-content: center;
}

.tips-title > span {
  font-size: 25px;
  /*font-family: PingFang SC, serif;*/
  font-weight: 500;
  color: #FF2B2B;
  line-height: 62px;
}

.tips-content > span {
  font-size: 18px;
  /*font-family: PingFang SC, serif;*/
  font-weight: 400;
  color: #333333;
  line-height: 25px;
}

.supplement > span {
  font-size: 16px;
  /*font-family: PingFang SC, serif;*/
  font-weight: 400;
  color: #66C107;
  line-height: 25px;
}

.supplement-button {
  width: 255px;
  height: 45px;
  background: linear-gradient(-8deg, #FFB200, #FED000);
  box-shadow: 0 9px 29px 0 rgba(254, 208, 0, 0.35);
  border-radius: 12px;
  justify-content: center;
}

.supplement-button > span {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 31px;
}

.array {
  width: 12px;
  height: 19px;
}

/*---------- 弹窗 我的卡券 -----------*/
.tips-part2 > div {
  margin-top: 10px;
}

.card-title {
  justify-content: center;
}

.card-content {
  width: 295px;
  height: 64.5px;
  background-image: url("../assets/icons/dialog/bg.png");
  background-size: cover;
  /*background-repeat:repeat-x;*/
  /*background-position:right top;*/
}

.card-content > img {
  height: 64.5px;
  width: 295px;
  /*background-size: cover;*/
}

.card-content-body {
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.card-leftpart {
  margin-left: 18px;
}

.card-leftpart > div:nth-child(1) > span {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
}

.card-leftpart > div:nth-child(2) > span {
  font-size: 11px;
  font-weight: 400;
  color: #FFFFFF;
  /*line-height: 31px;*/
}

.card-rightpart {
  margin-right: 31px;
}

.card-rightpart > div:nth-child(1) > span {
  font-size: 28px;
  font-weight: bold;
  color: #000000;
  line-height: 31px;
  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  background: linear-gradient(-8deg, #FFD7D5 0.1220703125%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-rightpart > div:nth-child(2) {
  padding-top: 7px;
  margin-left: 5px;
}

.card-rightpart > div:nth-child(2) > span {
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 31px;
}

.card-content-body-part1 {
  height: 100%;
  width: 244px;
  justify-content: space-between;
}

.card-content-button {
  width: 41px;
  height: 41px;
  background-image: url("../assets/icons/dialog/bt01.png");
  /*background-repeat: no-repeat;*/
  background-size: cover;
}

.lingqu > span {
  font-size: 10px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 31px;
}

.card-content-button > img {
  width: 41px;
  height: 41px;
  margin-right: 9.5px;
}

.card-title > span {
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  line-height: 31px;
}

.card-button {
  justify-content: center;
}

.card-button > span {
  font-size: 11px;
  font-weight: 400;
  color: #62BF03;
  line-height: 31px
}

.card-button > img {
  width: 4px;
  height: 6.5px;
  margin-left: 3.5px;
}

.card-close {
  height: 0;
}

.whiteArray {
  width: 4px;
  height: 6.5px;
  margin-left: 4px;
}

.card-close > img {
  position: relative;
  top: 100px;
  width: 33px;
  height: 33px;
}

/* ------- 新闻弹窗 -------------*/
.newsImage {
  width: 285px;
  height: 161px;
}

.newsContent > div:nth-child(1) > img {
  width: 285px;
  height: 161px;
}

.newsContent > div:nth-child(2) > span {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 25px;
}
</style>
<style lang="scss" scoped>
.mainWrapper {
  //overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.main {
  height: 90vh;
  overflow: scroll;
}

/* tabbar */
.tabbar {
  width: 100%;
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 13px 0;
  justify-content: space-around;
  text-align: center;
  font-size: 10px;
  box-shadow: 0 -5px 10px #ccc;

  .thisList {
    color: #64C005;
  }
}

</style>
